<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<%@ taglib prefix="dict" uri="/WEB-INF/tld/dict.tld" %>
<%@page import="com.nti56.springboot.utils.Constant"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <jsp:include page="../include.jsp"/>
    <script type="text/javascript" src="${ctx}/js/echarts.min.js"></script>
    <script type="text/javascript">
        var barData;
        var echartsBar;//全局变量
        $(function() {
           
        	$('#proDateFrom').datebox('setValue', '${currYMD}');  
        	$('#proDateTo').datebox('setValue', '${currYMD}');
        	
        });

        function doSearch(){
            var params=$('#queryForm').serializeObject();
            $('#dg').datagrid('load',params);
        }

        function doClear(){
            $('#queryForm').form("clear");
        }

        function setHeight(){
            var c = $('#cc');
            var p = c.layout('panel','center');
            var oldHeight = p.panel('panel').outerHeight();
            var newHeight = p.panel('panel').outerHeight();
            c.layout('resize',{
                height: (c.height() + newHeight - oldHeight),
            });
        }

        function exportExcel(machNum) {
        	var proDateFrom = $('#proDateFrom').datebox('getValue');
        	var proDateTo = $('#proDateTo').datebox('getValue');
    		var shift = $('#shift').combobox('getValue');
    		if(shift !=""){
    			if(proDateFrom !=proDateTo){
    				//alert("选择班次后，时间范围必须是同一天！");
    				parent.$.messager.alert('错误', "选择班次后，时间范围必须是同一天！", 'error');
    				return;
    			}
    		}
    		var fromMonth = proDateFrom.substr(0,7);
    		var toMonth = proDateTo.substr(0,7);
    		if(fromMonth !=toMonth ){
    			//alert("日期范围必须是同一个月份！");
    			parent.$.messager.alert('错误', "日期范围必须是同一个月份！", 'error');
    			return;
    		}
    		var days = getDaysBetween(proDateFrom,proDateTo);
    		if(days>7){
    			//alert("日期跨度范围不允许超过7天！");
    			parent.$.messager.alert('错误', "日期跨度范围不允许超过7天！", 'error');
    			return;
    		}
    		debugger;
    		location.href="${ctx}/machRunTime/downloadChanliang?proDateFrom="+proDateFrom+"&proDateTo="+proDateTo+"&machNum="+machNum+"&shift="+shift;
        }
		
        function getDaysBetween(dateString1,dateString2){
       	   var  startDate = Date.parse(dateString1);
       	   var  endDate = Date.parse(dateString2);
       	   var days=(endDate - startDate)/(1*24*60*60*1000);
       	   return  days;
       	}
       
    </script>
    
    <style>
		body {
		    margin: 0;
		    padding: 0;
		}
	
		
	    .lay2{
	       width:1000px; 
	       height:80px; 
	       //border:1px solid #FF6699;
		   margin:0 auto;
		   display:flex;justify-content:center;align-items:center;/*div中的div居中*/
	     }   
	    
		
		.horizontal_green{
	        float:left;//添加float样式即可实现水平排列
	        border:1px solid black;
	        margin-left:20px;
			width: 50px; 
			height: 50px;
			//background-color: green;
			text-align: center;/*让文字水平居中*/
		    position:relative
	    }
		.horizontal_green p{
			 position:absolute;
			 bottom:0px;
			 padding:0px;
			 margin:0px;
		}
	
		.horizontal_red{
	        float:left;//添加float样式即可实现水平排列
	        border:1px solid black;
	        margin-left:20px;
			width: 50px; 
			height: 50px;
			//background-color: red;
			text-align: center;/*让文字水平居中*/
			position:relative
	    }
		
		.horizontal_red p{
			 position:absolute;
			 bottom:0px;
			 padding:0px;
			 margin:0px
		}
	
	
		.horizontal_yello{
	        float:left;//添加float样式即可实现水平排列
	        border:1px solid black;
	        margin-left:20px;
			width: 50px; 
			height: 50px;
			//background-color: #eef105;
			text-align: center;/*让文字水平居中*/
			position:relative
	    }
		.horizontal_yello p{
			 position:absolute;
			 bottom:0px;
			 padding:0px;
			 margin:0px
		}
		.horizontal_gray{
	        float:left;//添加float样式即可实现水平排列
	        border:1px solid black;
	        margin-left:20px;
			width: 50px; 
			height: 50px;
			//background-color: gray;
			text-align: center;/*让文字水平居中*/
			position:relative
	    }
		.horizontal_gray p{
			 position:absolute;
			 bottom:0px;
			 padding:0px;
			 margin:0px
		}
		
		p{
		    display: inline-block;
		    vertical-align: middle;
		}
	</style>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height:45px;padding-top:5px;padding-left:5px">
        <div style="float:left;margin-left:40px;background-color: green;width:50px;height:20px "><img src="${ctx}/images/green.jpg" alt="" style="vertical-align:middle;" width="50" height="20" />运行${runCnt}</div>
        <div style="float:left;margin-left:40px;background-color: #eef105;width:50px;height:20px"><img src="${ctx}/images/red.jpg" alt="" style="vertical-align:middle;" width="50" height="20" />停止${standCnt}</div>
        <div style="float:left;margin-left:40px;background-color: red;width:50px;height:20px"><img src="${ctx}/images/yellow.jpg" alt="" style="vertical-align:middle;" width="50" height="20" />报错${alarmCnt}</div>
        <div style="float:left;margin-left:40px;background-color: gray;width:50px;height:20px"><img src="${ctx}/images/hui.jpg" alt="" style="vertical-align:middle;" width="50" height="20" />离线${offLineCnt}</div>  
        <input class="easyui-datebox" id="proDateFrom" name="proDateFrom" labelAlign="right" label="时间范围:" labelWidth="100px" labelPosition="left" data-options="editable:false,required:true" style="width:20%;height:22px;">
        <input class="easyui-datebox" id="proDateTo" name="proDateTo" labelAlign="right" label="至" labelWidth="20px" labelPosition="left" data-options="editable:false,required:true" style="width:12%;height:22px;" >       
        <select class="easyui-combobox" id="shift" name="shift" labelAlign="right" labelWidth="40px" label="班次:"labelPosition="left" editable="false" style="width:15%;height:24px;">
			<option value="">全部</option>	
			<c:forEach items="${dictShiftItems}" var="item">
				<option value="${item.itemValue}" >${item.itemText}</option>
			</c:forEach>
		</select>     
    </div>   
    <div data-options="region:'center',border:false">
<%--     	<c:set var="machCount" value="${ fn:length(machInfoAll) }" scope="page"/>
     	<c:forEach items="${machInfoAll}" var="item" varStatus="status">
     		<c:if test="${(status.index+1) % 10 == 0}">
		          <div class="lay2">
		          		<c:forEach begin="${status.index }" end="${status.index+10}" var="j">
						   <div class="horizontal_green">${machCount}: ${machInfoAll[j].machNum}</div>
						</c:forEach>			          	
		          </div>
		     </c:if>
     	</c:forEach> --%>
     	${machInfoDiv}
    </div> 
</div>
</body>
</html>